<template>
	<view class="page flex-col" style="height:auto;">
		<view class="group_1 flex-col">
			<view class="nav-bar_1 flex-row">
				<div class="group_2 flex-col">
					<image src="@/static/images/houselift.png" style="width: 40upx;height: 40upx" @tap="goBack" />
				</div>
				<text class="text_1">工程招标</text>
			</view>
			<text class="text_2">诚信服务平台快速实现服务需求</text>
			<view class="group_3 flex-row">
				<view class="block_1 flex-row">
					<view class="image-text_1 flex-row justify-between">
						<image class="icon_1" referrerpolicy="no-referrer"
							src="@/pages1/pages/projects-commen/projects/publish/assets/images/dui_circle.png" />
						<text class="text-group_1">快速精准锁定客户</text>
					</view>
				</view>
				<view class="block_2 flex-row">
					<view class="image-text_2 flex-row justify-between">
						<image class="icon_2" referrerpolicy="no-referrer"
							src="@/pages1/pages/projects-commen/projects/publish/assets/images/dui_circle.png" />
						<text class="text-group_2">安全有保障</text>
					</view>
				</view>
				<view class="block_3 flex-row">
					<view class="image-text_3 flex-row justify-between">
						<image class="icon_3" referrerpolicy="no-referrer"
							src="@/pages1/pages/projects-commen/projects/publish/assets/images/dui_circle.png" />
						<text class="text-group_3">隐私保密</text>
					</view>
				</view>
			</view>
		</view>
		<view class="group_4 flex-col">
			<view class="group_5 flex-row justify-between">
				<text class="text_3">工程标题</text>
				<input type="text" class="input" value="" v-model="title" placeholder="请输入"
					placeholder-class="placeholder-class" />
			</view>
			<view class="group_5 flex-row justify-between">
				<text class="text_3">工程类型</text>
				<view class="" style="display: flex;align-items: center;" @tap="goType()">
					<text class="text_4">{{type_name}}</text>
					<div class="flex-col icon-you yticon" style="margin-left: 16upx;"></div>
				</view>
			</view>
			<view class="group_5 flex-row justify-between">
				<text class="text_3">总工程量</text>
				<input type="number" class="input" value="" v-model="amount" placeholder="请输入(m³)"
					placeholder-class="placeholder-class" />
			</view>
			<view class="group_5 flex-row justify-between">
				<text class="text_3">工程报价</text>
				<input type="number" class="input" value="" v-model="price" placeholder="请输入(万元)"
					placeholder-class="placeholder-class" />
			</view>
			<view class="group_5 flex-row justify-between">
				<text class="text_3">项目位置</text>
				<input type="text" class="input" value="" v-model="address" placeholder="请输入具体位置"
					placeholder-class="placeholder-class" maxlength="600" />
			</view>
			<view class="group_9 flex-col"></view>
			<view class="group_10 flex-row">
				<text class="text_3">现场照片</text>
				<view class="d-flex" style="width: 94%; flex-wrap: wrap; margin-left: 3%;"  @click="imgclick(1)">
					<view class="">
						<uploads :type="code"></uploads>
					</view>
				</view>
				<!-- <image class="image_1" referrerpolicy="no-referrer"
					src="@/pages1/pages/projects-commen/projects/publish/assets/images/add_light_black.png" /> -->

			</view>
			<view class="group_10 flex-row">
				<text class="text_3" style="display: block;">CAD图纸/效果图上传</text>
				<!-- <view class="d-flex" style="width: 94%; flex-wrap: wrap; margin-left: 3%;" @click="imgclick(2)">
					<view class="">
						<uploads :type="code" ></uploads>
					</view>
				</view> -->
				<!-- <image class="image_1" referrerpolicy="no-referrer"
					src="@/pages1/pages/projects-commen/projects/publish/assets/images/add_light_black.png" /> -->
			
			</view>
			<view class="group_10 flex-row">
				<text class="text_3" style="display: block;"></text>
				<view class="d-flex" style="width: 94%; flex-wrap: wrap; margin-left: 3%;" @click="imgclick(2)">
					<view class="">
						<uploads :type="code" ></uploads>
					</view>
				</view>
				<!-- <image class="image_1" referrerpolicy="no-referrer"
					src="@/pages1/pages/projects-commen/projects/publish/assets/images/add_light_black.png" /> -->
			
			</view>
			<div class="group_9 flex-col"></div>
			<view class="group_10 flex-col justify-between">
				<text class="text_12">项目描述</text>
				<textarea value="" class="textarea" placeholder="请简单描述项目内容" v-model="detail"
					placeholder-class="placeholder-class" />
			</view>
			<view class="" style="height: 160px;">

			</view>
			<!-- <view class="group_12 flex-col"></view> -->
			<view class="group_13 flex-col">
				<image src="/static/images/remind.png" mode=""
					style="width:207upx;height:56upx;position: absolute;top:-16upx;left:42upx" v-if="isShowRemind">
				</image>
				<view class="box_1 flex-row" style="align-items: center;">
					<checkbox value="cb" :checked="checked" class="remember-input" :class="'animation-' + animation"
						@tap="agree" />
					<text class="text_14">请确认已阅读并接受</text>
					<text class="text_15">《工程招标发布协议》</text>
				</view>
				<button class="button_1 flex-col" @click="submit()"
					style="align-items: center;justify-content: center;">
					<text class="text_16">立即发布</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uploads from "@/components/uploads.vue";
	export default {
		data() {
			return {
				constants: {},
				checked: false,
				animation: '',
				isShowRemind: false,
				typesData: [],
				code: "1",

				title: '',
				type_name: '请选择',
				type: 0,
				amount: '',
				price: '',
				address: '',
				pics: '',
				cad_img:'',
				detail: '',
				imgclickValue:0,
			};
		},
		onLoad() {
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.getTypes();
			uni.$on('change', (options) => {
				if(uni.getStorageSync("imgclickValue")==1){
					this.pics = JSON.stringify(options)
				}else{
					this.cad_img = JSON.stringify(options)
				}
			})
		},
		components: {
			uploads
		},
		methods: {
			imgclick(e){
				uni.setStorageSync("imgclickValue",e)
			},	
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			async getTypes() {
				let tdata = await this.$myRequest({
					url: '/types'
				})

				let data = tdata.data.data;
				data.forEach((item, index) => {
					this.typesData.push(item.name)
				})
			},

			async agree() {
				if (this.checked === true) {
					this.checked = false;
					this.isShowRemind = true;
				} else {
					this.checked = true;
					this.isShowRemind = false;
				}
			},

			goType() {
				let that = this;
				uni.showActionSheet({
					itemList: that.typesData,
					success: function(res) {
						that.type = res.tapIndex + 1
						that.type_name = that.typesData[res.tapIndex]
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

			async submit() {
				if (this.checked === false) {
					uni.pageScrollTo({
						scrollTop: 58,
						duration: 0
					});
					this.isShowRemind = true;
					this.animation = 'shake';
					setTimeout(() => {
						this.animation = ''
					}, 2000);
					return false;
				}

				if (this.title == '') {
					this.$api.msg('请输入工程标题')
					return false;
				}
				if (this.type == 0) {
					this.$api.msg('请选择工程类型')
					return false;
				}

				// if (this.amount == 0) {
				// 	this.$api.msg('请输入总工程量')
				// 	return false;
				// }

				// if (this.price == 0) {
				// 	this.$api.msg('请输入总价')
				// 	return false;
				// }

				if (this.address == '') {
					this.$api.msg('请输入项目具体位置')
					return false;
				}

				// if (this.pics == '') {
				// 	this.$api.msg('请上传现场照片')
				// 	return false;
				// }

				let res = await this.$myRequest({
					url: '/projects',
					data: {
						cate: uni.getStorageSync('cate'),
						token: uni.getStorageSync('token'),
						title: this.title,
						type: this.type,
						amount: this.amount,
						price: this.price,
						address: this.address,
						pics: this.pics,
						cad_img: this.cad_img,
						detail: this.detail,
					},
					methods: 'post'
				})

				this.$api.msg(res.data.msg, 'success', 1000);
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages1/pages/projects-commen/projects/list/index'
					})
				}, 1000)
			}
		}
	};
</script>
<style lang='css'>
	@import '../../common/common.css';
	@import './assets/style/index.rpx.css';
</style>
<style lang="scss" scoped>
	/* #ifdef APP-PLUS */
	.nav-bar_1 {
		margin-top: 50px;
	}

	.group_3 {
		top: 110px
	}

	.group_1 {
		height: 150px;
	}

	/* #endif */
	.remember-input {
		display: inline-block;
		transform: scale(0.6)
	}

	.placeholder-class {
		color: rgba(204, 204, 204, 1);
	}

	.input {
		text-align: right;
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
	}

	.textarea {
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
		margin-top: 10upx;
		height: 130upx;
		width: 100%;
		text-align: justify;
	}

	.animation-shake {
		animation: shake 0.3s !important;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}
</style>